<template>
  <div class="container">
    <Search
      :searchData="searchData"
      @selData="selData"
      @gotoInit="gotoInit"
      v-if="isMount"
    ></Search>
    <el-table
      :data="tableObj.temporary"
      @row-click="handleRow"
      stripe
      style="width: 100%"
      lazy
    >
      <el-table-column prop="index" label="序号" width="150"> </el-table-column>

      <el-table-column prop="imgPath" label="图片" width="150">
        <template slot-scope="scope">
          <img
            :src="require('/src/assets/img/' + scope.row.imgPath)"
            width="50"
            height="50"
          />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="茶名" width="120"> </el-table-column>

      <el-table-column prop="username" label="下单人" width="100">
      </el-table-column>

      <el-table-column prop="buyTime" label="下单时间" width="160">
      </el-table-column>

      <el-table-column prop="number" label="数量" width="50"> </el-table-column>

      <el-table-column prop="money" label="金额" width="110"> </el-table-column>

      <el-table-column prop="status" label="发货状态" width="80">
      </el-table-column>

      <el-table-column prop="estatus" label="评价状态" width="120">
      </el-table-column>

      <el-table-column prop="address" label="收货地址" width="300">
      </el-table-column>

      <el-table-column prop="receiver" label="收货人" width="120">
      </el-table-column>

      <el-table-column prop="phone" label="收货人手机号" width="120">
      </el-table-column>

      <el-table-column prop="" label="相关操作" width="300">
        <el-button type="success" icon="el-icon-edit" @click="modifyOrder"
          >修改信息</el-button
        >
        <el-button type="danger" icon="el-icon-delete" @click="deleteOrder"
          >删除订单</el-button
        >
      </el-table-column>
    </el-table>
    <Pages
      :tableObjs="tableObj"
      v-if="flag"
      v-show="tableObj.tableData.length"
    ></Pages>
    <ModifyOrder @gotoInit="gotoInit"></ModifyOrder>
  </div>
</template>

<script>
import { getReq, postRequest } from "../../util/request";
import { renderFunc } from "../../util/tools";
import Pages from "../../components/Pages.vue";
import ModifyOrder from "../../components/Admin/ModifyOrder.vue";
import Search from "../../components/Admin/search.vue";

export default {
  name: "ManageOrder",
  components: { Pages, ModifyOrder, Search },
  data() {
    return {
      flag: false,
      tableObj: {
        tableData: [],
        number: 3,
        totalPages: 0,
        currentPage: 1,
        temporary: [],
      },
      searchData: "",
      isMount: false,
    };
  },
  methods: {
    //点击行
    handleRow(row) {
      this.rowData = row;
      console.log(row);
    },
    //初始化
    init() {
      let getAllUser = getReq("admin/getAllOrder");
      getAllUser.then(
        (res) => {
          renderFunc(res.data, this.tableObj);
          this.flag = true;
          this.searchData = this.tableObj;
          this.isMount = true;
        },
        (err) => {
          throw err;
        }
      );
    },
    //修改订单信息
    modifyOrder() {
      setTimeout(() => {
        // console.log("this.rowData", this.rowData);
        this.$bus.$emit("orderData", this.rowData);
      });
    },

    //接受子组件，更新数据
    gotoInit(data) {
      if (data) {
        this.init();
      }
    },
    //搜索到的订单
    selData(data) {
      setTimeout(() => {
        if (data.length === 0) {
          this.$message({
            type: "warning",
            message: "为找到搜索的内容",
            duration: 3000,
          });
          renderFunc(this.tableObj.tableData, this.tableObj);
        } else {
          renderFunc(data, this.tableObj);
        }
      }, 100);
    },
    //删除订单信息
    deleteOrder() {
      setTimeout(() => {
        if (window.confirm("确定删除该用户吗?")) {
          let deleteResult = postRequest("admin/deleteOrder", {
            id: this.rowData.id,
          });
          deleteResult.then((res) => {
            if (res.data.isDelete) {
              this.$message({
                type: "success",
                message: "删除成功",
                duration: 3000,
              });
              this.init();
            }
          });
        }
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  background-color: white;
}
</style>